/* eslint-disable eqeqeq */
/* eslint-disable no-unused-vars */
import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'umi'
import { withI18n } from '@lingui/react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
import { Card, Button, Modal, Tag, Image, message } from 'antd'
import Pagination from '@/utils/Pagination'
import { layout, success } from '@/utils/helper'
import styles from './index.less'
import { post, get, Delete } from '@/services/https'
import { Unite } from '@/utils/Unite'
import ImageWithToken from '@/plugins/ImageWithToken'
import ImageWithTokenBig from '@/plugins/ImageWithTokenBig'

import VeWithToken from '@/plugins/veWithToken'
import PdfWithToken from '@/plugins/pdfWithToken'

const confirm = Modal.confirm
@withI18n()
class Command extends React.Component {
  formRef = React.createRef()
  state = {
    label_list: [],
    course_label: '全部课程',
    total: 0, //总页数
    current: 1,
    pageSize: 10,
    dataSource: [],
    visible: false,
    items: {
      course_type: 1,
      course_content: '',
    },
  }

  //初始化时自调用一次，用于请求借口数据
  componentDidMount() {
    this.getData()
    this.onChangeCurPageOrPageSize(1, 10)
  }
  getData = () => {
    post('course/label/list').then((res) => {
      let dataSource = ['全部课程']
      this.setState({ label_list: dataSource.concat(res.data) })
    })
  }
  onChangeCurPageOrPageSize = (current, pageSize) => {
    this.setState(
      () => ({ current, pageSize }),
      () => {
        this.getDataCourse(current, pageSize)
      }
    )
  }
  getDataCourse = (current, pageSize) => {
    let data = {
      page_index: current,
      page_size: pageSize,
      course_label: this.state.course_label,
    }
    if (this.state.course_label === '全部课程') {
      data = {
        course_label: '',
      }
    }
    post('course/list', data).then((res) => {
      this.setState({ dataSource: res.data, total: res.size })
    })
  }
  Label = (item) => {
    this.setState({ course_label: item })
    this.onChangeCurPageOrPageSize(1, 10)
  }
  modal = (item) => {
    if (item.course_type === 3) {
      window.open(item.course_content)
    } else if (item.course_type === 2) {
      this.setState({ visible: true, items: item })
    } else if (item.course_type === 1) {
      this.setState({ visible: true, items: item })
    } else {
      this.setState({ visible: true, items: item })
    }
  }

  handleOk = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        course_type: 1,
        course_content: '',
      },
    })
  }
  handleCancel = () => {
    if (this.ChildPage && this.state.items.course_type === 1) {
      this.ChildPage.fat('调用子组件的 editRowEvt 方法')
    }
    this.setState({
      visible: false,
      items: {
        course_type: 1,
        course_content: '',
      },
    })
  }
  handleChildEvent = (ref) => {
    this.childRef = ref
  }
  render() {
    const { i18n } = this.props
    const { dataSource, imageSrc, course_label, label_list, items } = this.state
    return (
      <div className="ct">
        <div className="ban">
          <div className="tetli">课程管理</div>
          <div
            style={{
              width: '60px',
              height: '6px',
              background:
                'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
            }}
          ></div>
          <div
            style={{ display: 'flex', flexWrap: 'wrap', margin: '20px 0 0 0' }}
          >
            {label_list.map((item) => {
              return (
                <div>
                  {course_label === item ? (
                    <Button
                      style={{ marginRight: '15px' }}
                      onClick={() => this.Label(item)}
                      type="primary"
                    >
                      {item}
                    </Button>
                  ) : (
                    <Button
                      style={{ marginRight: '15px' }}
                      onClick={() => this.Label(item)}
                    >
                      {item}
                    </Button>
                  )}
                </div>
              )
            })}
          </div>
        </div>
        <div>
          <div style={{ display: 'flex', flexWrap: 'wrap' }}>
            {dataSource.map((item) => {
              return (
                <div
                  style={{
                    margin: '10px',
                    padding: '7px',
                    border: '1px solid #cccccc6e',
                    borderRadius: '5px',
                    width: '18%',
                  }}
                >
                  <div
                    onClick={() => this.modal(item)}
                    style={{ cursor: 'pointer' }}
                  >
                    <ImageWithToken key={item.id} src={item.course_logo} />
                  </div>
                  <div
                    style={{
                      fontWeight: '500',
                      fontSize: '16px',
                      color: '#111111',
                      lineHeight: '24px',
                      marginTop: '8px',
                    }}
                    className={styles.text_overflow}
                  >
                    {item.course_name}
                  </div>
                </div>
              )
            })}
          </div>
          <Pagination
            current={this.state.current}
            pageSize={this.state.pageSize}
            total={this.state.total}
            handleChange={this.onChangeCurPageOrPageSize} //当前页及条数改变都会从子组件触发此方法，用于传递页码和条数
            pageSizeOptions={['10']} // 针对不同的组件需求传递每次多少条，不传已在分页组件写默认值了
          ></Pagination>
        </div>
        <Modal
          width={
            items.course_type == 1
              ? '40%'
              : items.course_type == 2
              ? '80%'
              : '40%'
          }
          title="课程内容"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          {/* 视频 */}
          {items.course_type == 1 ? (
            <div>
              <VeWithToken
                onRef={(c) => (this.ChildPage = c)}
                key={items.id}
                src={items.course_content}
              />
            </div>
          ) : (
            ''
          )}
          {/* pdf文档 */}
          {items.course_type == 2 ? (
            <div>
              <PdfWithToken key={items.id} src={items.course_content} />
            </div>
          ) : (
            ''
          )}
          {/*  */}
          {items.course_type == 3 ? <div></div> : ''}
          {/* 图片 */}
          {items.course_type == 4 ? (
            <div>
              <ImageWithTokenBig key={items.id} src={items.course_content} />
            </div>
          ) : (
            ''
          )}
        </Modal>
      </div>
    )
  }
}
Command.propTypes = {
  post: PropTypes.object,
  // loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default Command
